<template>
	<div class="view">
		<div class="etag-view" v-for="(etag, eindex) in data.data">
			<div>
				<p class="ctags-groupName" 
					v-text="etag.groupName"
					v-if="formatGroupName(etag, eindex)">
				</p>
			</div>
			
			<div class="header-view">
				<div class="header-no" v-text="'#' + (eindex + 1)"></div>
				<div class="btns-view">
					<div style="margin-right: 10px;">
						<Button type="primary" 
							@click="click2Edit(etag, eindex)" 
							size="small">
							编辑
						</Button>
					</div>
					<div class="inner-sort-btns-view">
						<Button type="primary" 
							@click="click2Sort(etag, eindex)" 
							:loading="etag.sortLoading"
							size="small">
							{{etag.sortable?'保存排序':'内部排序'}}
						</Button>
						<Button type="ghost" 
							@click="click2CancelSort(etag)" 
							size="small"
							v-if="etag.sortable">
							取消排序
						</Button>
					</div>
					<div class="sort-btns-view" v-if="sortable">
						<Button-group>
							<Button type="ghost" 
								icon="arrow-up-c" 
								size="small" 
								v-if="eindex > 0"
								@click="click2SubmitSort($event, eindex, eindex - 1)">
							</Button>
							
							<Button type="ghost" 
								icon="arrow-down-c" 
								size="small"
								v-if="eindex < data.data.length - 1"
								@click="click2SubmitSort($event, eindex, eindex + 1)">
							</Button>
					    </Button-group>
					    <Input-number 
							size="small"
							:min="1"
							:max="data.data.length"
							:step="1" 
							style="width: 50px;"
							v-model="etag.sort">
						</Input-number>
						<Button type="primary" size="small" 
							@click="click2SubmitSort($event, eindex, etag.sort - 1)">
							确认
						</Button>
					</div>
				</div>
			</div>
			
			<div class="ctags-etName">
				<CEntityTagNameSetView
					:data="etag" 
					@on-click="hideEntityTag">
				</CEntityTagNameSetView>
			</div>
			
			<div class="etags-container">
				<draggable 
					v-model="etag.userEntityTags" 
					@update="dataDragEnd" 
					:options="{animation: 300, disabled: !etag.sortable}">
					
					<transition-group name="list-complete" class="etags-panel">
						<div 
							v-bind:class="{'etags-item': etag.etType == 1, 'etags-item-company': etag.etType == 2}"
							v-for="(item, index) in etag.userEntityTags" 
							:key="index"
							@click="click2EditUEtag(etag, item, eindex, index)">
							<CHeadIcon 
								:data = "formatHeadIcon(etag.etType, item)">
							</CHeadIcon>
							
							<div class="etag-name">
								<span 
									class="sensitive-label"
									v-if="item.isSensitive == 1">
								</span>
								<span v-text="item.name">
								</span>
							</div>
							
							<p class="etag-role" 
								v-if="etag.etType == 1 && etag.type == 2 
									&& item.roleName != null 
									&& item.roleName.length > 0">
								（<span v-text="'饰：' + item.roleName"></span>）
							</p>
						</div>
					</transition-group>
				</draggable>
				
				<div 
					v-bind:class="{'add-tag':etag.etType == 1, 'add-tag-company':etag.etType == 2}"
					@click="click2AddUEtag(etag, eindex)">
					<div class="add-btn">
						<Icon type="ios-plus-empty" size="30" color="#666"></Icon>
					</div>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
	import CHeadIcon from '@/components/CHeadIcon.vue';
	import CEntityTagNameSetView from '@/pages/works/view/CEntityTagNameSetView.vue';
	import draggable from 'vuedraggable';
	
	import EtagService from '@/services/EtagService.js';
	const $etagService = EtagService();
	
	export default {
		props: ['data', 'sortable'],
		components:{
			CHeadIcon, draggable, CEntityTagNameSetView
		},
		data() {
			return {
				companyIcon: './static/company_img.png'
			}
		},
		mounted() {
		},
		methods: {
			click2Sort(etag, index) {
				var $this = this;
				if(etag.sortable) {
					etag.sortLoading = true;
					$this.$emit("on-action", 'sort', {
						etag: etag,
						index: index
					});
				} else {
					etag.sortable = !etag.sortable;
				}
			},
			click2CancelSort(etag) {
				etag.sortable = false;
			},
			click2SubmitSort(event, index, sort) {
				var $this = this;
				if(sort >= $this.data.data.length) {
					return;
				}
				if(index == sort) {
					return ;
				}
				console.log(index);
				console.log(sort);
				
				var temp = $this.data.data[index];
				$this.data.data.splice(index, 1); 
				$this.data.data.splice(sort, 0, temp); 
				for(var i = 0; i < $this.data.data.length; i++) {
					$this.data.data[i].sort = i + 1;
				}
			},
			hideEntityTag: function(etag, index) {
				var $this = this;
				if(etag.hideIndex == index) {
					etag.hideIndex = index - 1;
				} else {
					etag.hideIndex = index;
				}
				//请求服务器
				var etId = etag.etId;
				var hideIndex = etag.hideIndex;
				$etagService.hideIndex(etId, hideIndex)
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) {
						$this.$Message.success(res.msg);
					} else {
						$this.$Message.error(res.msg);
					}
				}, function(error) {
					$this.$Message.error(error);
				});
			},
			click2Edit(etag, index) {//编辑实体标签
				this.$emit('on-action', 'edit', {
					etag: etag,
					index: index
				});
			},
			click2AddUEtag: function(etag, gindex) {//新增用户实体标签
				this.$emit('on-action', 'addUEtag', {
					etag: etag,
					gindex : gindex
				});
			},
			click2EditUEtag: function(etag, uetag, gindex, cindex) {//编辑用户实体标签
				this.$emit('on-action', 'editUEtag', {
					 etag : etag,
					 gindex : gindex,
					 cindex : cindex,
					 uetag : uetag
				});
			},
			dataDragEnd(evt) {
				console.log('拖动前的索引 :' + evt.oldIndex)
				console.log('拖动后的索引 :' + evt.newIndex)
				console.log(this.tags)
			},
			formatHeadIcon(etType, item) {
				return {
					icon : etType == 1 ? item.userIcon : this.companyIcon,
					letter : item.userLetter,
					wh : etType == 2 ? 150 : 60,
					radius : etType == 1 
				};
			},
			formatGroupName(etag, index) {
				var $this = this;
				var etags = $this.data.data;
				if(etag.groupName == '' || etag.groupName == null || etag.groupName.length == 0) {
					return false;
				} else {
					if(index == 0)
						return true;
					else {
						if(etag.groupName != null && etag.groupName != etags[index - 1].groupName) {
							return true;
						}
					}
				}
				return false;
			}
		}
	}
</script>

<style scoped="scoped">
	.etag-view {
		margin-top: 10px;
		cursor: pointer;
		border: 1px solid #E8E8E8;
		box-shadow: 0px 0px 6px #E8E8E8;
		border-radius: 3px;
	}
	.etag-view:hover {
		
	}
	
	.etag-view .header-view {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		padding: 10px;
		border-bottom: 1px solid #E1E7E9;
	}
	
	.etag-view .header-view .header-no {
		flex: 1;
		font-weight: bold;
		font-size: 15px;
		color: #666;
	}
	.etag-view .header-view .btns-view {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
	}
	
	.etag-view .header-view .btns-view .inner-sort-btns-view {
		margin-right: 10px;
	}
	
	.ctags-groupName {
		background-color: #F8F8F8;
		font-size: 16px;
		padding: 10px;
		text-align: center;
	}
	
	.ctags-btns {
		display: flex;
		display: -webkit-flex;
	}
	
	.ctags-etName {
		font-size: 15px;
		padding: 10px;
		text-align: center;
		margin-bottom: 10px;
	}
	
	.etags-container {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
	}
	
	.etags-panel {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
	}
	
	.etags-item {
		margin-left: 20px;
		margin-bottom: 20px;
		width: 90px;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		-webkit-flex-direction: column;
		align-items: center;
		-webkit-align-items: center;
	}
	
	.etags-item-company {
		margin-left: 20px;
		margin-bottom: 20px;
		width: 200px;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		-webkit-flex-direction: column;
		align-items: center;
		-webkit-align-items: center;
	}
	.etag-name {
		font-size: 12px;
		margin-top: 10px;
		color: #000;
		opacity: 0.87;
		text-align: center;
	}
	.etag-role {
		font-size: 12px;
		margin-top: 5px;
		text-align: center;
		color: #000;
		opacity: 0.54;
	}
	.add-tag .add-btn {
		border: 1px dashed #999;
		width: 60px;
		height: 60px;
		text-align: center;
		line-height: 75px;
		border-radius: 15%;
		-webkit-border-radius: 15%;
		-moz-border-radius: 15%;
		margin: 0 auto;
	}
	
	.add-tag {
		width: 90px;
		height: 90px;
		margin-left: 20px;
	}
	
	.add-tag-company {
		width: 200px;
		height: 200px;
		margin-left: 20px;
	}
	
	.add-tag-company .add-btn {
		border: 1px dashed #999;
		width: 150px;
		height: 150px;
		text-align: center;
		line-height: 150px;
		margin: 0 auto;
	}
	
	.sensitive-label {
		background-color: red;
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 100%;
	}
	
</style>